<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书馆</title>
		<link rel="stylesheet" type="text/css" href="./css/lili.css"/>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
		<script>
		var i = 0;
		$(document).ready(function(){
		var $wrap_index = $(".contentRight_wrapimg").eq().prevObject.length // 轮播图图片数量
		$('.contentRight_wrapimg').eq(0).show().siblings('.contentRight_wrapimg').hide(); // 隐藏除第一张外的轮播图
		var $Leftcontent_show = false;

		showTime();
		// 轮播图
		function showTime(){
			timer = setInterval(function(){
				i++;
			    //当图片是最后一张的后面时，设置图片为第一张
			    if(i==$wrap_index){
			      i=0;
			    }
				$('.contentRight_wrapimg').eq(i).fadeIn(1000)
				if(i==0){
					$('.contentRight_wrapimg').eq($wrap_index-1).hide()
				}else{
					for(let j=0;j<$wrap_index;j++){
						if(j!=i){
							$('.contentRight_wrapimg').eq(j).hide()
						}
					}
				}

			  },30000);
		}
		  $("#contentLeft_close").click(function(event){
			 // 关闭右侧导航栏
			 $("#contentLeft_close").css("display","none")
			 $("#leftNavigation").css("display","none")
			 $("#contentLeft").css("width","50px")
			 $("#contentRight").css("margin-left","50px")
			 $("#contentLeft").css("cursor","pointer")
			 $(".contentRight_wrapsskuang").css("right","28%")
			 $("#contentLeft_open").css("display","block")
			 chageshow();
			 event.stopPropagation();
		  })
		  function chageshow(){
			  $Leftcontent_show = false
		  }
		  $("#contentLeft").click(function(event){
			  // 打开右侧导航栏
			  if($Leftcontent_show==true){
				  return
			  }else{
				  $("#contentLeft").css("width","200px");
				  $("#contentLeft_close").css("display","block");
				  $("#leftNavigation").css("display","block");
				  $("#contentLeft").css("cursor","auto")
				  $("#contentRight").css("margin-left","200px")
				  $(".contentRight_wrapsskuang").css("right","15%")
				  $("#contentLeft_open").css("display","none")
				  $Leftcontent_show = true
			  }
			  event.stopPropagation();
		  })
		  // 左边导航栏词条上下滑动：电子资源、馆藏书刊等
		  $("#left__1").click(function(){
				$("#left__1_detail").slideToggle(200);
		  })
		  $("#left__2").click(function(){
				$("#left__2_detail").slideToggle(200);
		  })
		  $("#left__3").click(function(){
				$("#left__3_detail").slideToggle(200);
		  })
		  $("#left__4").click(function(){
				$("#left__4_detail").slideToggle(200);
		  })


		  // 读秀
		  $("#duxiuBtn").click(function () {
	    if($("#duxiuText").val() == "") {
	        alert("请输入检索词");
	        return;
	    }
	    var channel = '', sw = '';
	    $('.js-duxiu-language option:checked').val() == 'cn' ? ( channel = $('.js-duxiu-select-cn option:checked').val() )
	        : ( channel = $('.js-duxiu-select-en option:checked').val() );
	    sw = $("#duxiuText").val();
	    window.open('http://www.duxiu.com/gosearch.jsp?channel=' + channel + '&ecode=utf-8&sw=' + sw + '&Field=all', '_blank') ;
	});
	$("#duxiuText").keyup(function(event) {
	    if(event.keyCode == 13) {
	        if($("#duxiuText").val() == "") {
	            alert("请输入检索词");
	            return;
	        }
	        var channel = '', sw = '';
	        $('.js-duxiu-language option:checked').val() == 'cn' ? ( channel = $('.js-duxiu-select-cn option:checked').val() )
	            : ( channel = $('.js-duxiu-select-en option:checked').val() );
	        sw = $("#duxiuText").val();
	        window.open('http://www.duxiu.com/gosearch.jsp?channel=' + channel + '&ecode=utf-8&sw=' + sw + '&Field=all', '_blank') ;
	    }
	})
	// 中文外文切换
	$('.js-duxiu-language').change(function(){
	    if( $('.js-duxiu-language option:checked').val() == 'cn' ) {
	        $('.js-duxiu-select-cn').show();
	        $('.js-duxiu-select-en').hide();
	    } else {
	        $('.js-duxiu-select-cn').hide();
	        $('.js-duxiu-select-en').show();
	    }
	});
	// 选项更换 知识发现、馆藏信息、数据库搜索、读秀搜索
	$("#sskuang_toplist_1").click(function(){
		$("#sskuang_toplist_1").addClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_2").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_3").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_4").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_detail_1").show();
		$("#sskuang_toplist_detail_2").hide();
		$("#sskuang_toplist_detail_3").hide();
		$("#sskuang_toplist_detail_4").hide();
	})
	$("#sskuang_toplist_2").click(function(){
		$("#sskuang_toplist_2").addClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_1").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_3").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_4").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_detail_2").show();
		$("#sskuang_toplist_detail_1").hide();
		$("#sskuang_toplist_detail_3").hide();
		$("#sskuang_toplist_detail_4").hide();

	})
	$("#sskuang_toplist_3").click(function(){
		$("#sskuang_toplist_3").addClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_1").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_2").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_4").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_detail_3").show();
		$("#sskuang_toplist_detail_2").hide();
		$("#sskuang_toplist_detail_1").hide();
		$("#sskuang_toplist_detail_4").hide();
	})
	$("#sskuang_toplist_4").click(function(){
		$("#sskuang_toplist_4").addClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_1").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_2").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_3").removeClass("contentRight_wrapsskuang_toplist_click");
		$("#sskuang_toplist_detail_4").show();
		$("#sskuang_toplist_detail_2").hide();
		$("#sskuang_toplist_detail_3").hide();
		$("#sskuang_toplist_detail_1").hide();
	})

		});
		</script>
		<script>
			$(document).ready(function() {
				$(".wheel-button").wheelmenu({
					trigger: "hover",
					animation: "fly",
					animationSpeed: "fast"
				});
		
			});
		</script>

		<style>
			/* 全局样式 */
			html{
				font-size: 16px;
			}
			
			body{
				background-color:  #F1FFFF;
				z-index: -1;
				/* height: 100vh; */
				/* width: 100vw; */
			}
			/* 分割线 */
			.gap{
				height: 2px;
				width:1200px ;
				background-color: #EDEDED;
				margin: 0 auto;
			}
			
			/* 扇形 */
			.svg_container{
				position: fixed;
				/* background-color: red; */		
				right: -8%;
				top:50%;
				transform: translateY(-50%);
			}
						
			.list div{
				text-align: center;
				vertical-align: middle;
				font-size:0.7rem;
			}
			.list:hover{
				color: green;
			}
			.paths{
				transition-duration: 0.5s;
			}
		</style>

	</head>
	<body style="margin:0;" >
		<div id="contentLeft">
			<img src="./static/meun.png" id="contentLeft_open" >
			<img src="./static/meun_close.png" id="contentLeft_close" >
			<ul id="leftNavigation" class="master" >
				<li class="left_list" >
					<a href="" class="content_a a_color_change_white" >我的图书馆</a>
				</li>
				<li class="left_list" >
					<a href="" class="content_a a_color_change_white" >党建工作</a>
				</li>
				<li class="left_list" id="left__1" >
					电子资源
				</li>
				<div class="left_detail_list_1" id="left__1_detail">
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >外文数据库</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >中文数据库</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >学位数据库</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >特色资源</a>
					</li>
				</div>
				<li class="left_list" id="left__2">
					馆藏书刊
				</li>
				<div class="left_detail_list_1" id="left__2_detail" >
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >书目检索</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >热门推荐</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >新书通报</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >读者荐购</a>
					</li>
				</div>
				<li class="left_list" id="left__3" >
					本馆概况
				</li>
				<div class="left_detail_list_1" id="left__3_detail" >
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >本馆简介</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >现任馆领导</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >规则制度</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >机构设置</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >开放时间</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >库室布局</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >联系我们</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >馆容馆貌</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >本站导航</a>
					</li>
					<li class="left_detail_list_style" >
						<a href="" class="content_a a_color_change_black " >咨询电话</a>
					</li>
				</div>
				<li class="left_list" id="left__4"  >
					馆务公开
				</li>
				<div class="left_detail_list_1" id="left__4_detail" >
				<li class="left_detail_list_style" >
					<a href="" class="content_a a_color_change_black " >招标公告</a>
				</li>
				</div>
				<li class="left_list" >
					<a href="" class="content_a a_color_change_white">校外访问</a>
				</li>
			</ul>
		</div>
		<div id="contentRight">
			<div id="contentRight_wrap">
				<img src="./static/R-C.png" class="contentRight_wrapicon" style="z-index: 9999;">
				<div class="contentRight_wraplsit" style="z-index: 9999;" >
					<!-- 右上框 -->
					<div class="contentRight_wraplsit_1">
						<a href="" class="content_a a_color_change_white">首页</a>
					</div>
					<div class="contentRight_wraplsit_1">
						<a href="" class="content_a a_color_change_white">我的图书馆</a>
					</div>
					<div class="contentRight_wraplsit_1">
						<a href="" class="content_a a_color_change_white">校外访问</a>
					</div>
					<div class="contentRight_wraplsit_1">
						<a href="" class="content_a a_color_change_white">English</a>
					</div>
					<div class="contentRight_wraptime" style="z-index: 9999;" >
						<!-- 右上框下面的时间 -->
							<div id="contentRight_wraptime_block">
							</div>
							<text style="cursor: default;" >8:00~22:00</text>
					</div>
				</div>
				
				<div class="contentRight_wrapsskuang" style="z-index: 9999;">
					<!-- 搜索框 -->
					<div class="contentRight_wrapsskuang_toplist">
						<div id="sskuang_toplist_1" class="contentRight_wrapsskuang_toplist_all contentRight_wrapsskuang_toplist_1 contentRight_wrapsskuang_toplist_click">
							知识发现
						</div>
						<div id="sskuang_toplist_2" class="contentRight_wrapsskuang_toplist_all">
							馆藏信息
						</div>
						<div id="sskuang_toplist_3" class="contentRight_wrapsskuang_toplist_all">
							数据库搜索
						</div>
						<div id="sskuang_toplist_4" class="contentRight_wrapsskuang_toplist_all contentRight_wrapsskuang_toplist_4">
							读秀搜索
						</div>
					</div>
					<div class="contentRight_wrapsskuang_form" id="sskuang_toplist_detail_1"  >
						<form action="https://ss.zhizhen.com/s" id="cxform" role="form"  >
						<input type="text" name="sw" id="" value="" placeholder="中英文学术资源一键式检索获取" placeholder-style="font-size:10px;" class="contentRight_wrapsskuang_form_input_1" />
						<button type="submit" class="contentRight_wrapsskuang_form_button_1" >搜索</button>
					</form>
					</div>
					<div class="contentRight_wrapsskuang_form" id="sskuang_toplist_detail_2"  style="display: none;" >
					<form action="https://lib2.scau.edu.cn/esourceController.do?db" role="form" method="post" id="sjkform"  >
						<input type="text" name="keyword" id="" value="" placeholder="搜索我馆购买、自建、试用数据库" placeholder-style="font-size:10px;" class="contentRight_wrapsskuang_form_input_1" />
						<button type="submit" class="contentRight_wrapsskuang_form_button_1" >搜索</button>
						<input type="hidden" name="page" value="dblist">
						<input type="hidden" name="siteCode" value="portal">
					</form>
					</div>
					<div class="contentRight_wrapsskuang_form_with_select_1" id="sskuang_toplist_detail_3"  style="display: none;" >
						<form action="https://libopac.scau.edu.cn/opac/openlink.php" id="searchform" name="cccform" role="form" >
							<select name="strSearchType" class="contentRight_wrapsskuang_form_select" >
								<option value="title">题&nbsp;&nbsp;名</option>
								<option value="author">责任者</option>
								<option value="keyword">主题词</option>
								<option value="isbn">ISBN/ISSN</option>
								<option value="asordno">订购号</option>
								<option value="coden">分类号</option>
								<option value="callno">索书号</option>
								<option value="publisher">出版社</option>
								<option value="series">丛书名</option>
								<option value="tpinyin">题名拼音</option>
								<option value="apinyin">责任者拼音</option>
							</select>
							<input type="text" name="strText" id="" value="" placeholder="馆藏纸本书刊、电子图书检索" placeholder-style="font-size:10px;" class="contentRight_wrapsskuang_form_input" />
							<button type="submit" class="contentRight_wrapsskuang_form_button_1" style="margin-left: 20px;" >搜索</button>
						</form>
					</div>
					<div class="contentRight_wrapsskuang_form_with_select_2" id="sskuang_toplist_detail_4" style="display: none;" >
						<div class="form-group" style="display: block;">
						      <select class=" js-duxiu-language contentRight_wrapsskuang_form_select" style="margin-top: 10px;"  >
						          <option value="cn">中文</option>
						          <option value="en">外文</option>
						      </select>
						      <!-- 中文下拉框 -->
						      <select class=" js-duxiu-select-cn contentRight_wrapsskuang_form_select">
						          <option value="search">图书</option>
						          <option value="searchJour">期刊</option>
						          <option value="searchNP">报纸</option>
						          <option value="searchThesis">学位论文</option>
						          <option value="searchCP">会议论文</option>
						      </select>
						      <!-- 外文下拉框 -->
						      <select class=" js-duxiu-select-en contentRight_wrapsskuang_form_select" style="display: none;">
						          <option value="searchFBook">图书</option>
						          <option value="searchFJour">期刊</option>
						          <option value="searchFThesis">学位论文</option>
						          <option value="searchFCP">会议论文</option>
						      </select>
						  </div>
						  <div class="form-group col-sm-5" >
						      <input class="contentRight_wrapsskuang_form_input" id="duxiuText" placeholder="请输入关键字" type="text">
						  </div>
						  <button type="button" id="duxiuBtn" class="contentRight_wrapsskuang_form_button_1" style="margin-top: 2.5px;" >搜索</button>
						  &nbsp;&nbsp;<a href="https://www.duxiu.com/more.jsp" style="text-decoration: none;padding-top: 10px;display: block;" target="_blank">更多</a>
				</div>
					</div>
				<!-- 轮播图 -->
				<!-- <img src="./static/banner/1.jpg" class="contentRight_wrapimg"> -->
				<!-- <img src="./static/banner/2.jpg" class="contentRight_wrapimg"> -->
				<video autoplay muted loop id="tm-video" >
					<!-- <source src="./static/video/book.mp4" type="video/mp4" class="contentRight_wrapimg"></source> -->
					<source src="./static/video/wave.mp4" type="video/mp4" class="contentRight_wrapimg"></source>
				</video>
			
				
				
				</div>
					<!-- 扇形跟随 -->
					<div class="svg_container">
						<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px" >
							<path class="paths" stroke="#FFF1B7" stroke-width="8" fill="#FED754" />
							<path class="paths" stroke="#FFF1B7" stroke-width="8" fill="#FED754" />
							<path class="paths" stroke="#FFF1B7" stroke-width="8" fill="#FED754" />
							<path class="paths" stroke="#FFF1B7" stroke-width="8" fill="#FED754" />
						
							
							<foreignObject class='center'>
						
							</foreignObject>
							
							<foreignObject class='list'>
								<div>
									
									<p>1</p>
								</div>
							</foreignObject>
							
							<foreignObject class='list'>
								<div>
									
									<p>2</p>
								</div>
							</foreignObject>
							
							<foreignObject class='list'>
								<div>
									
									<p>3</p>
								</div>
							</foreignObject>
							
							<foreignObject class='list'>
								<div>
									
									<p>4</p>
								</div>
							</foreignObject>
						</svg>
					</div>
					
					<!-- 11.0 微信馆长信箱跟随 -->
					<div class="follow_tank">
						<a href="#wheel3" class="wheel-button nw">
							<span>+</span>
						</a>
						
						<ul id="wheel3" data-angle="NW" class="wheel">
							<img src="img/wechat.png"  class="item">
							<img src="img/qq.png"  class="item">
							<img src="img/curatorMail.png"  class="item">
							<img src="img/advice.png"  class="item">
							
							
							<!-- <li class="item"><a href="#home">A</a></li>
							<li class="item"><a href="#home">B</a></li>
							<li class="item"><a href="#home">C</a></li> -->
					
						</ul>
					</div>
				
				
						<!--		guohai-->
						<!-- 1.0 热门数据库之类 -->
						<div class="service_box">
							<div class="container">
								<div class="square"></div>
								<div class="database">
									<div class="font_big">热门数据库</div>
									<div class="font_small">更多服务</div>
								</div>
								<div class="icon"></div>
								<div class="detail_item" >
									<a style="display: inline-block;">SCI</a>
									<a style="display: inline-block;">SSCI </a>
									<a style="display: inline-block;">CA</a>
									<a style="display: inline-block;">EI</a>
									<a style="display: inline-block;">Wiley</a>
									<a style="display: inline-block;">Springer</a>
									<a style="display: inline-block;">ProQuest</a>
									<a style="display: inline-block;">JSTOR</a>
									<a style="display: inline-block;">CNKI</a>
									<a style="display: inline-block;">超星电子书</a>
									<a style="display: inline-block;">新东方多媒体</a>
									<a style="display: inline-block;">中科试题</a>
									<a style="display: inline-block;">维普</a>
									<a style="display: inline-block;">万方</a>
								</div>
							</div>
				
							<div class="container">
								<div class="square"></div>
								<div class="database">
									<div class="font_big">热门服务啊</div>
									<div class="font_small">常用软件</div>
								</div>
								<div class="icon"></div>
								<!-- <div class="detail" > -->
									<div class="detail_item" >
										<a style="display: inline-block;">检索证明</a>
										<a style="display: inline-block;">原文传递  </a>
										<a style="display: inline-block;">学位论文提交</a>
										<a style="display: inline-block;">图书捐赠</a>
										<a style="display: inline-block;">芸借购</a>
										<a style="display: inline-block;">NE文献管理软件</a>
										<a style="display: inline-block;">CAJ阅读器</a>
										<a style="display: inline-block;">超星阅读器</a>
									</div>
								<!-- </div> -->
							</div>
						</div>
				
						<!-- 分割线 -->
						<div class="gap" style="margin-top: 30px;"> </div>
						<!-- 2. 资讯   -->
						<div class="infomation_container" style="margin-top: 40px;">
				
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">资讯</div>
							</div>
				
							<div class="infomation_middle">
								<div class="info_container">
									<div class="top">
										<div class="text1">通知公告</div>
										<div class="text2">更多</div>
									</div>
				
									<!-- 一条条的信息 -->
									<div class="all" >
										<div class="tank" >
											<div class="time">05-31</div>
											<div>
												<div class="dot"></div>
												<div class="content">泉学堂知识库试用通知阿巴阿巴asdasdasd </div>
											</div>
										</div>
									</div>
								</div>
				
								<div class="info_container">
									<div class="top">
										<div class="text1">通知公告</div>
										<div class="text2">更多</div>
									</div>
				
									<!-- 一条条的信息 -->
									<div class="all" >
										<div class="tank" >
											<div class="time">05-31</div>
											<div>
												<div class="dot"></div>
												<div class="content">泉学堂知识库试用通知阿巴阿巴asdasdasd </div>
											</div>
										</div>
									</div>
								</div>
				
								<div class="info_container">
									<div class="top">
										<div class="text1">通知公告</div>
										<div class="text2">更多</div>
									</div>
				
									<!-- 一条条的信息 -->
									<div class="all" >
										<div class="tank" >
											<div class="time">05-31</div>
											<div>
												<div class="dot"></div>
												<div class="content">泉学堂知识库试用通知阿巴阿巴asdasdasd </div>
											</div>
										</div>
									</div>
								</div>
							</div>
				
						</div>
						<!-- 分割线 -->
						<div class="gap" style="margin-top: 30px;"> </div>
						<!-- 3. 信息推送  -->
						<div class="push_container" style="margin-top: 40px;">
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">信息推送</div>
							</div>
				
							<div class="push_middle">
								<div class="push_item_container">
									<div class="push_square_tank" >
										<div class="item_square" ></div>
										<div class="item_title" >线上培训</div>
									</div>
								</div>
								<div class="push_gap"></div>
								<div class="push_item_container">
									<div class="push_square_tank" >
										<div class="item_square" ></div>
										<div class="item_title">学科情报</div>
									</div>
								</div>
								<div class="push_gap"></div>
								<div class="push_item_container">
									<div class="push_square_tank" >
										<div class="item_square" ></div>
										<div class="item_title">专利信息</div>
									</div>
								</div>
							</div>
				
						</div>
						<!-- 分割线 -->
						<div class="gap" style="margin-top: 30px;"> </div>
						<!-- 4.0 经典诵读  -->
						<div class="classic_container" style="margin-top: 40px;">
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">经典诵读</div>
							</div>
							<div class="class_tank">
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg" height="270" width="240"/>
									<div class="p_title" >小王子</div>
									<div  class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg"  height="270" width="240"/>
									<div class="p_title" >小王子</div>
									<div  class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg" height="270" width="240"/>
									<div class="p_title" >小王子</div>
									<div class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg" height="270" width="240"/>
									<div class="p_title" >小王子</div>
									<div class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
							</div>
						</div>
				
						<!-- 5.0 新书通报  -->
						<div class="book_container" style="margin-top:40px ;display: block;">
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">新书通报</div>
							</div>
							<div class="book_tank">
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg"  height="240" width="360"/>
									<div class="p_title" >小王子</div>
									<div class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg"  height="240" width="360"/>
									<div class="p_title" >小王子</div>
									<div class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
								<div class="p_container" >
									<img class="p_image" src="./img/1.jpg"  height="240" width="360"/>
									<div class="p_title" >小王子</div>
									<div class="p_content">·《小王子》详细内容大小详细内容大小是法国作家安托万·德·圣·埃克苏佩里于1942年写成的著名儿童文学短篇小说。本书的主人公是来自外星球的小王子。书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。作者以小王子的孩子式的眼光</div>
								</div>
							</div>
						</div>
						
						<!-- 10.0 图书评论  -->
						<div class="book_review_tank">
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">图书评论</div>
							</div>
							
						</div>
				
						<!-- 6.0 特色资源  -->
						<div class="cha_container" style="margin-top: 40px;">
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">特色资源</div>
							</div>
				
							<div style="width: 1120px;margin: 20px auto;height: px;background-color:#159698;margin-top: 20px;"  ></div>
							<div class="cha_tank">
								<div class="cha_left">在线展览</div>
								<div class="cha_gap"></div>
								<div class="cha_right">图书涓流</div>
							</div>
						</div>
						<!-- 7.0 图书馆数据  -->
						<div class="library_container" style="margin-top: 40px;">
							<div class="library_text">图书馆数据</div>
							<div class="library_tank">
								<div>
									<span class="library_big">456785</span>
									<span class="library_small">平方米</span>
									<div class="library_small">
										图书馆面积
									</div>
								</div>
								<div>
									<span class="library_big">456785</span>
									<span class="library_small">万册</span>
									<div class="library_small">
										实体馆藏
									</div>
								</div>
								<div>
									<span class="library_big">456785</span>
									<span class="library_small">万册</span>
									<div class="library_small">
										古书籍
									</div>
								</div>
								<div>
									<span class="library_big">456785</span>
									<span class="library_small">平方米</span>
									<div class="library_small">
										图书馆面积
									</div>
								</div>
							</div>
						</div>
						<!-- 8.0 机构知识库  -->
						<div class="knowledge_container" style="margin-top: 40px;">
							<div class="square_tank" >
								<div class="square" ></div>
								<div class="square_title">机构知识库</div>
							</div>
						</div>
						<!-- 9.0 网站相关信息 -->
						<div class="website_container" style="margin-top: 40px;">
							<div>详细咨询业务，请点击咨询电话或者在线咨询、FAQ</div>
							<div>中国 广州 华南农业大学图书馆 510640 电话：85280144 馆长信箱:tsgggz@scau.edu.cn</div>
							<div>版权所有：中国 广州 华南农业大学图书馆(C)(M)备案编号：粤ICP备05008874号 4401060500010</div>
						</div>
			</div>
	</body>
	<script>
		// 扇形 句子图形
		Object.defineProperties(window,{
			El: {
				value: function(el) {
					return document.querySelector(el)
				},
				enumerable: false
			},
			Els: {
				value: function(el) {
					return document.querySelectorAll(el)
				},
				enumerable: false
			}
		})
		
		init();
		
		window.onresize = function(){
			init();
		}
		
		//选着一个扇区放大
		function selectFan(num){
			//除了选中的放大，其他的都不变
			console.log(num)
			console.log(Els(".paths"))
			
			Els(".paths").forEach((item,index)=>{
				console.log(item)
				if(index==num-1){
					item.style.transform = `rotate(${-45*index}deg) scale(1.1)`;
					item.style.fill="#FAC53F";
					Els('.list')[index].style.transform = `rotate(${-45*index}deg) scale(1.05)`;
				}else{
					item.style.transform = `rotate(${-45*index}deg) scale(1)`;
					item.style.fill="#FED754";
					Els('.list')[index].style.transform = `rotate(${-45*index}deg) scale(1)`;
				}
			})
		}
		
		
		
		var service_box_y=document.getElementsByClassName("service_box")[0].offsetTop,
			infomation_container_y=document.getElementsByClassName("infomation_container")[0].offsetTop,
			push_container_y=document.getElementsByClassName("push_container")[0].offsetTop,
			classic_container_y=document.getElementsByClassName("classic_container")[0].offsetTop,
			book_container_y=document.getElementsByClassName("book_container")[0].offsetTop,
			cha_container_y=document.getElementsByClassName("cha_container")[0].offsetTop,
			library_container_y=document.getElementsByClassName("library_container")[0].offsetTop,
			knowledge_container_y=document.getElementsByClassName("knowledge_container")[0].offsetTop,
			website_container_y=document.getElementsByClassName("website_container")[0].offsetTop;
		// 每一个主题的在这个文档中的 y
		var y_arr=[service_box_y,infomation_container_y,push_container_y,classic_container_y,book_container_y,
					cha_container_y,library_container_y,knowledge_container_y,website_container_y]
			
		//默认第一个扇区放大
		var fanSelect=1;
		selectFan(1)
		
		
		
		
			
		window.onscroll = function () {
		    console.log(document.documentElement.scrollTop);
		    var scrollTop = document.documentElement.scrollTop;
			var clientHeight=document.documentElement.clientHeight
		    // 0 - 300
			//300 - 1000
			//1100 - 1700
			//1700 - 2200
			//2200 -2800
			//2800 - 3200
			//3200 - 3260
			console.log("高度是："+document.body.scrollHeight )
			
			//计算公式  一个主题在屏幕的中间的时候，调整跟随扇形的选择
			//主题在中间的计算公式        （主题元素的y-document.body.scrollHeight）/clientHeight < 30%  
			//算了，简单一点
			console.log(y_arr)
			for(i=0,len=y_arr.length;i<len;i++){
				let temp=(y_arr[i]-scrollTop)
				//寻找到第一个大于零的
				if(temp>=0){
					fanSelect=i+1;
					selectFan(fanSelect);
					break;
				}
			}
			
			
		}
		
		getElementPosition(document.getElementsByClassName("library_container")[0])
			
		 function getElementPosition(e) {
			var x = e.offsetLeft, y = e.offsetTop;
			console.log("x:"+x+"  y:"+y)
		}
		
		
		
		
		function init(){
			//宽高为当前页面的18%
			El(".svg_container").style.width = document.body.clientWidth*.15 + 'px';  //修改svg大小
			El(".svg_container").style.height = document.body.clientWidth*.15 + 'px';
			
			var contW = El(".svg_container").style.width,
				contH = El(".svg_container").style.height;
			
			//svg自适应
			El("#svg").setAttribute('width',contW)
			El("#svg").setAttribute('height',contH)
			
			//中间图形自适应
			El(".center").setAttribute('x',contW.split('px')[0]/2 - contW.split('px')[0]/8)
			El(".center").setAttribute('y',contW.split('px')[0]/2 - contW.split('px')[0]/8)
			El(".center").setAttribute('width',contW.split('px')[0]/4)
			El(".center").setAttribute('height',contW.split('px')[0]/4)
			
			mkChart();
		}
		
		
		function mkChart(){
			//配置各种宽高
			var svgWsm = El("#svg").clientWidth-100,
				svgHsm = El("#svg").clientHeight-100,
				svgW2 = svgWsm/2,
				svgH2 = svgWsm/2,
				svgW = El("#svg").clientWidth,
				svgH = El("#svg").clientHeight,
				djx = Math.sqrt(Math.pow(svgW2,2)+Math.pow(svgH2,2)),
				djxW = Math.sqrt(Math.pow(djx-svgW2,2)/2);
				
			var ds = `M${svgW2+50} ${svgH2+50} L${svgW2+50} 50 A ${svgW2} ${svgH2} 0 0 0 ${djxW+50} ${djxW+50} Z`;
			
			//循环扇形
			Els(".paths").forEach((item,index)=>{
				item.setAttribute("d",ds);
				//自己旋转
				item.style.transform = `rotate(${-45*index}deg)`;
				item.style.transformOrigin = `${svgW2+50}px ${svgH2+50}px`;
				//触碰
				item.onmouseover= () => {
					console.log("1进入")
					//扇形放大
					item.style.transform = `rotate(${-45*index}deg) scale(1.1)`;
					item.style.fill="#FAC53F";
					//里面内容同步放大
					// Els('.list')[index].style.backgroundColor="#FAC53F"
					Els('.list')[index].style.transform = `rotate(${-45*index}deg) scale(1.05)`;
		
		
				}
				item.onclick=()=>{
					console.log(index)
					document.documentElement.scrollTop=y_arr[index]
					
				}
				item.onmouseleave = () => {
					console.log("1出去")
					//还原
					item.style.transform = `rotate(${-45*index}deg)`;
					item.style.fill="#FED754";
					
					// Els('.list')[index].style.backgroundColor="#FED754"
					Els('.list')[index].style.transform = `rotate(${-45*index}deg)`;
					
				}
			})
			
			//循环扇形内容
			Els('.list').forEach((item,index)=>{
				//自己旋转
				item.style.transform = `rotate(${-45*index}deg)`;
				item.style.transformOrigin = `${svgW2+50}px ${svgH2+50}px`;
				//子元素反旋转显示正位
				item.children[0].style.transform = `rotate(-${-45*index}deg)`;
				//触碰
				item.onmouseover = () => {
					console.log("2进入")
					//外层同步放大
					Els('.paths')[index].style.transform = `rotate(${-45*index}deg) scale(1.1)`;
					Els('.paths')[index].style.fill="#FAC53F"
			
					//内层放大
					item.style.transform = `rotate(${-45*index}deg) scale(1.05)`;
					// item.style.fill="#FAC53F";  //加深颜色
				}
				item.onclick=()=>{
					console.log(index)
					document.documentElement.scrollTop=y_arr[index]
				}
				item.onmouseleave = () => {
					console.log("2出去")
					//还原
					Els('.paths')[index].style.fill="#FED754";
					Els('.paths')[index].style.transform = `rotate(${-45*index}deg)`;
					
					// item.style.fill=`#FED754`;   // 加深颜色
					item.style.transform = `rotate(${-45*index}deg)`;
				
				}
				//里面的位置
				item.setAttribute('x',svgW/2 - svgW/6);
				item.setAttribute('y',svgH/5);
				item.setAttribute('width',svgW/6);
				item.setAttribute('height',svgH/6);
			})	
		}
		
	</script>
	<script>
	    //右下角的加好 微信 qq 图书馆藏
		
		!function($){
		  
		  var defaults = {
				trigger: "click",
				animation: "fade",
				angle: [0,360],
				animationSpeed: "medium"
			};
			
			$.fn.centerAround = function (button) {
		    var offset = button.offset(),
		        width = button.outerWidth(),
		        height = button.outerHeight(),
		        buttonX = (offset.left - $(document).scrollLeft() ) + width / 2,
		        buttonY = (offset.top -  $(document).scrollTop() ) + height / 2,
		        objectOffset = this.offset();
		    this.css("position","fixed");
		    this.css("top", buttonY  - (this.outerHeight() / 2)  + "px");
		    this.css("left", buttonX - (this.outerWidth() / 2)   + "px");
		    return this;
		  }
		  
		  $.fn.flyIn = function (el, button, width, height, angle, step, radius, settings) {
		    var d = 0;
		    this.stop(true,true);
		    this.each(function(index) {
		      angle = (settings.angle[0] + (step * index)) * (Math.PI/180); 
		      var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).find("a").outerWidth()/2),
		          y = Math.round(height/2 + radius * Math.sin(angle) - $(this).find("a").outerHeight()/2);
		      $(this).animateRotate(360).css({
		          position: 'absolute',
		          opacity: 0,
		          left: "50%",
		          top: "50%",
		          marginLeft: "-" + $(this).outerWidth() / 2,
		          marginTop: "-" + $(this).outerHeight() / 2
		      }).delay(d).animate({
		        opacity:1,
		        left: x + 'px',
		        top: y + 'px'
		      }, settings.animationSpeed[1]);
		      d += settings.animationSpeed[0];
		    });
		  }
		  
		  $.fn.flyOut = function (el, button) {
		    var d = 0;
		    this.stop(true,true);
		    $(this.get().reverse()).each(function() {
			    $(this).animateRotate(-360).delay(d).animate({
			      opacity:0,
			      left: el.outerWidth() / 2 + "px",
		        top: el.outerHeight() / 2 + "px"
			    }, 150);
		      d += 15;
			  }).promise().done( function() {
		      el.removeClass("active").css("visibility", "hidden").hide();
		      button.removeClass("active")
		    });
		  }
		  
		  $.fn.fadeInIcon = function (el, button, width, height, angle, step, radius, settings) {
		    var d = 0;
		    this.stop(true,true);
		    this.each(function(index) {
		      angle = (settings.angle[0] + (step * index)) * (Math.PI/180); 
		      var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).find("a").outerWidth()/2),
		          y = Math.round(height/2 + radius * Math.sin(angle) - $(this).find("a").outerHeight()/2);
		      $(this).css({
		          position: 'absolute',
		          left: x + 'px',
		          top: y + 'px',
		          opacity: 0
		      }).delay(d).animate({opacity:1}, settings.animationSpeed[1]);
		      
		      d += settings.animationSpeed[0];
		    });
		  }
		  
		  $.fn.fadeOutIcon = function (el, button) {
		    var d = 0;
		    this.stop(true,true);
		    
		    $(this.get().reverse()).each(function() {
			    $(this).delay(d).animate({opacity:0}, 150);
		      d += 15;
			  }).promise().done( function() {
		      el.removeClass("active").css("visibility", "hidden").hide();
		      button.removeClass("active")
		    });
		  }
			
			$.fn.hideIcon = function (button, settings) {
			  var fields = this.find(".item"),
			      el = this;
			  switch (settings.animation) { 
		      case 'fade': 
		        fields.fadeOutIcon(el, button)
		        break; 
		    
		      case 'fly': 
		        fields.flyOut(el, button)
		        break; 
		    }
			  
			}
			
			$.fn.showIcon = function (button, settings) {
			  var el = this,
			      zindex = '6';
			  if (settings.trigger == "hover") {
			    var zindex = '3';
		    }
			  button.addClass("active").css({
		      'z-index': zindex
		    });
		    
		    
		    
			  el.show().css({
		        position: 'absolute',
		        'z-index': '5',
		        'padding': '30px' // add safe zone for mouseover
		    }).centerAround(button); 
		    el.addClass("wheel active").css("visibility", "visible").show();
			  
			  if (el.attr('data-angle')) {
		      settings.angle = el.attr('data-angle')
		    }
		    
		    settings = predefineAngle(settings);
			  var radius = el.width() / 2,
		      fields = el.find(".item"),
		      container = el,
		      width = container.innerWidth(),
		      height = container.innerHeight(),
		      angle =  0,
		      step = (settings.angle[1] - settings.angle[0]) / fields.length;
		     
		     
		      switch (settings.animation) { 
		        case 'fade': 
		          fields.fadeInIcon(el, button, width, height, angle, step, radius, settings)
		          break; 
		          
		        case 'fly': 
		          fields.flyIn(el, button, width, height, angle, step, radius, settings)
		          break; 
		      }
		    
			}
			
			$.fn.animateRotate = function(angle, duration, easing, complete) {
		      return this.each(function() {
		          var $elem = $(this);
		
		          $({deg: 0}).animate({deg: angle}, {
		              duration: duration,
		              easing: easing,
		              step: function(now) {
		                  $elem.css({
		                      transform: 'rotate(' + now + 'deg)'
		                  });
		              },
		              complete: complete || $.noop
		          });
		      });
		  };
		  
			
			function predefineAngle (settings) {
			  var convert = false
			  if ($.type(settings.angle) == "string") {
			    try {
		        if (eval(settings.angle).length > 1) convert = true
		      }
		      catch(err) {
		        convert = false
		      }
			    if (convert == true) {
			      settings.angle = JSON.parse(settings.angle);
			    } else {
			      switch (settings.angle) { 
		          case 'N':
		            settings.angle = [180,380]
		            break;
		          case 'NE':
		            settings.angle = [270,380]
		            break;
		          case 'E':
		            settings.angle = [270,470]
		            break;
		          case 'SE':
		            settings.angle = [360,470]
		            break;
		          case 'S':
		            settings.angle = [360,560]
		            break;
		          case 'SW':
		            settings.angle = [90,200]
		            break;
		          case 'W':
		            settings.angle = [90,290]
		            break;
		          case 'NW':
		            settings.angle = [180,290]
		            break;
		          case 'all':
		            settings.angle = [0,360]
		            break;
		        }
			    } 
		    }
		    return settings;
			}
			
			function predefineSpeed(settings) {
			  if ($.type(settings.animationSpeed) == "string") { 
		      switch (settings.animationSpeed) { 
		        case 'slow':
		          settings.animationSpeed = [75,700]
		          break;
		        case 'medium':
		          settings.animationSpeed = [50,500]
		          break;
		        case 'fast':
		          settings.animationSpeed = [25,250]
		          break;
		        case 'instant':
		          settings.animationSpeed = [0,0]
		          break;
		      }
		    }
		    return settings;
			}
		  
		  $.fn.wheelmenu = function(options){
		    var settings = $.extend({}, defaults, options);
		    
		    settings = predefineSpeed(settings);
		    
		    return this.each(function(){
		      var button = $(this)
		      var el = $($(this).attr("href"));
		      el.addClass("wheel");
		      
		      button.css("opacity", 0).animate({
		        opacity: 1
		      })
		      if (settings.trigger == "hover") {
		
		        button.bind({
		          mouseenter: function() {
		            el.showIcon(button, settings);
		          }
		        });
		        
		        el.bind({
		          mouseleave: function() {
		            el.hideIcon(button, settings);
		          }
		        });
		        
		      } else {
		        button.click( function() {
		          if (el.css('visibility') == "visible") {
		            el.hideIcon(button, settings);
		          } else {
		            el.showIcon(button, settings);
		          }
		        });
		      }
		    });
		  }
		  
		}(window.jQuery);
		
	</script>
</html>
